<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Sistema de Avaliação</title>

        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script type="text/javascript" src="../js/highcharts.js"></script>
        <script type="text/javascript" src="../js/exporting.js"></script>

        <script type="text/javascript">
            $(function() {
                $('#container').highcharts({
                    title: {
                        text: 'Pontos por Mês',
                        x: -20 //center
                    },
                    subtitle: {
                        text: 'Source: WorldClimate.com',
                        x: -20
                    },
                    xAxis: {
                        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    },
                    yAxis: {
                        title: {
                            text: 'Pontos'
                        },
                        plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                    },
                    tooltip: {
                        valueSuffix: ' pts'
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },
                    series: [#{acompanhamentoBean.series}]
                });
            });
        </script>
    </h:head>
    <h:body> 
        <h:form>
            <p:breadCrumb>
                <p:menuitem value="Categories" url="#" />
                <p:menuitem value="Sports" url="#" />
                <p:menuitem value="Basketball" url="#" />
                <p:menuitem value="NBA" url="#" />
                <p:menuitem value="Teams" url="#" />
                <p:menuitem value="L.A. Lakers" url="#" />
                <p:menuitem value="Roster" url="#" />
                <p:menuitem value="Kobe Bryant" url="#" />
            </p:breadCrumb>
        </h:form>
        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    </h:body>
</html>

